<template>
<div>
  <van-nav-bar title="首页" />
<!--  1.轮播-->
  <div style="width: 90%;margin-left: 5%;">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
  </div>
  <div>
    <div>
      <h3 style="margin-left: 20px;border-left:3px solid blue;float: left;padding-left: 10px ">门诊服务</h3>
    </div>
    <div style="clear: both">
      <van-grid :gutter="10">
        <van-grid-item v-for="value in 8" :key="value" icon="clock-o" text="文字" />
      </van-grid>
      </div>
  </div>
  <div>
    <div>
      <h3 style="margin-left: 20px;border-left:3px solid blue;float: left;padding-left: 10px ">住院服务</h3>
    </div>
    <div style="clear: both">
      <van-grid :gutter="10">
        <van-grid-item v-for="value in 4" :key="value" icon="clock-o" text="文字" />
      </van-grid>
    </div>

  </div>
  <div>
    <div>
      <h3 style="margin-left: 20px;border-left:3px solid blue ;float: left;padding-left: 10px">医院服务</h3>
    </div>
    <div style="clear: both">
      <van-grid :gutter="10">
        <van-grid-item v-for="value in 4" :key="value" icon="clock-o" text="文字" />
      </van-grid>
    </div>

  </div>
</div>
</template>

<script setup>

</script>

<style scoped>
.my-swipe{
  color: #fff;
  width: 100%;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  border-radius: 10px;
}
</style>
